<!-- @format -->

<template>
	<ma-chart :option="loginChartOptions" />
</template>

<script setup lang="ts">
	import { nextTick, onMounted, ref } from "vue";
	import { graphic } from "echarts";
	import warehouseMaster from "@/api/warehouse/warehouseMaster.js";

	function graphicFactory(side) {
		return {
			type: "text",
			bottom: "8",
			...side,
			style: {
				text: "",
				textAlign: "center",
				fill: "#4E5969",
				fontSize: 12,
			},
		};
	}

	const graphicElements = ref([
		graphicFactory({ left: "2.6%" }),
		graphicFactory({ right: 0 }),
	]);

	const loginChartOptions = ref({});

	onMounted(() => {
		warehouseMaster
			.getList({
				qst: 1,
			})
			.then((res) => {
				let monthList = [];
				let data = [];

				res.data.forEach((item) => {
					monthList.push(item.time);
					data.push(item.weight);
				});
				loginChartOptions.value = {
					background: "transparent",
					tooltip: {
						trigger: "item",
					},
					grid: {
						borderWidth: 0,
						top: "10%",
						left: "7%",
						right: "7%",
						bottom: "15%",
					},
					xAxis: [
						{
							type: "category",
							axisTick: {
								show: false,
							},
							axisLine: {
								show: false,
							},
							axisLabel: {
								show: true,
							},
							data: monthList,
						},
					],
					yAxis: {
						type: "value",
						name:'单位：吨',
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						splitLine: {
							show: true,
						},
						axisLabel: {
							show: true,
						},
					},
					series: [
						{
							name: "",
							type: "bar",
							zlevel: 2,
							barWidth: "20px",
							data: monthList.map((item, index) => {
								return {
									name: item,
									value: data[index],
									itemStyle: {
										normal: {
											show: true,
											color: new graphic.LinearGradient(
												0,
												1,
												0,
												0,
												[
													{
														offset: 0,
														color: "rgba(0,160,233,0)",
													},
													{
														offset: 0.98,
														color: "rgba(0,160,233,0.7)",
													},
													{
														offset: 1,
														color: "rgba(0,160,233,1)",
													},
												],
												false
											),
										},
										emphasis: {
											color: "rgba(198,163,255,0.8)",
											disabled: true,
										},
									},
								};
							}),
							animationDuration: 1500,
						},
					],
				};
			});
	});
</script>

<style lang="less" scoped></style>
